<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/header.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Register</title>
    <!-- JqueryUI -->
    <link rel="stylesheet" type="text/css" href="${style}/front/jquery-ui.css">

    <link rel="stylesheet" type="text/css" href="${style}/animate.min.css">
    <link rel="stylesheet" type="text/css" href="${style}/input.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="${style}/front/bootstrap.min.css">
    <!-- Awesome font icons -->
    <link rel="stylesheet" type="text/css" href="${style}/front/font-awesome.min.css" media="screen">
    <!-- Owlcoursel -->
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.transitions.css">
    <!-- Magnific-popup -->
    <link rel="stylesheet" type="text/css" href="${style}/front/magnific-popup/magnific-popup.css">
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="${style}/front/style.css" media="screen">
    <!-- Fw -->
    <link rel="stylesheet" type="text/css" href="${style}/front/fw.css" media="screen">
</head>
<body>
<%--herder--%>
<jsp:include page="../header.jsp"/>

<section class="m-t-0">
    <div class="container m-t-30">
        <h3 class="title f-30">个人中心</h3>
        <%--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>--%>
        <div class="row ht-tabs ht-tabs-product">
            <div class="col-md-3 col-lg-2 pull-left-xs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="panel panel-default">
                        <a href="/front/mybuycar/buycarlist">购物车</a>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">我的订单</a>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li role="presentation active">
                                    <a href="#">全部</a>
                                </li>
                                <li role="presentation">
                                    <a href="#">待付款</a>
                                </li>
                                <li role="presentation">
                                    <a href="#">待发货</a>
                                </li>
                                <li role="presentation">
                                    <a href="#">待收货</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">优惠券</a>
                        <div id="collapse2" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li role="presentation">
                                    <a href="/front/mycoupons/showdetail">全部优惠券</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/mycoupons/showdetailbyMycoupons">我的优惠券</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">我的钱包</a>
                        <div id="collapse3" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li role="presentation">
                                    <a href="#">充值/余额</a>
                                </li>
                                <li role="presentation">
                                    <a href="#">消费记录</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">个人信息管理</a>
                        <div id="collapse4" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li role="presentation">
                                    <a href="/front/persion/showMyInfo">我的信息</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/address/showaddress">地址管理</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/persion/showupdatepwd">修改密码</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="col-md-9 col-lg-10">
                <!-- Tab panes -->
                <div class="content">

                    <form class="form-search" method="post">
                        <input type="text" name="addurl" value="${addurl}" class="input-medium search-query">
                        <button type="submit" class="btn">搜索</button>
                    </form>

                    <div class="container">
                        <div class="row">

                            <div class="col-md-4">
                                <img style="width: 372px; height: 372px;" src="" alt="" id="goodspic">
                            </div>
                            <div class="col-md-8">
                                <form class="form-horizontal">
                                    <input type="text" name="descUrl" hidden value="${descUrl}" class="hidden">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label" for="goodsname">商品名称</label>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" id="goodsname" placeholder="商品名称"
                                                   readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label" for="shoptitle">商店名称</label>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" id="shoptitle" placeholder="商店名称"
                                                   readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label" for="price">价格</label>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" id="price" placeholder="价格"
                                                   readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label" for="postfee">运费</label>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" id="postfee" placeholder="运费"
                                                   readonly>
                                        </div>
                                    </div>

                                    <div id="more-info" style="">

                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label" for="nums">数量</label>
                                        <div class="col-md-8">
                                            <a class="col-md-1 increase btn btn-default" onclick="increase()">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>

                                            <div class="col-md-6">
                                                <input type="tel" class="form-control" id="nums" value="1"
                                                       placeholder="数量">
                                            </div>
                                            <a class="col-md-1 decrease btn btn-primary" onclick="decrease()">
                                                <i class="glyphicon glyphicon-minus"></i>
                                            </a>

                                        </div>

                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label" for="remark">备注</label>
                                        <div class="col-md-8">
                                            <textarea type="text" class="form-control" id="remark"
                                                      placeholder="备注"></textarea>
                                        </div>

                                    </div>
                                </form>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-md-12 hidden" id="description">
                                ${descHtml}
                            </div>
                        </div>
                    </div>
                    <script>
                        $(function () {
                            var jsonStr = '${jsonResult}';
                            var item = eval('(' + jsonStr + ')');
                            var data = item.data;
                            $('#goodsname').val(data.Title);
                            $('#shoptitle').val(data.Shop);
                            $('#price').val(data.Price);
                            $('#postfee').val(data.PostFee);
                            $('#goodspic').attr('src', data.PicUrl);

                            var GoodsShowSkuItems = data.GoodsShowSkuItems;
                            var Skus = data.Skus;

                            var moreinfo = $('#more-info');
                            $(GoodsShowSkuItems).each(function () {
                                var tmp = '<div class="form-group"><label class="col-md-2 control-label">' + $(this)[0].PropName + '</label><div class="col-md-8">';
                                if ($(this)[0].PropertyAliasList.length !== 0) {
                                    var PropertyAliasList = $(this)[0].PropertyAliasList;
                                    $(PropertyAliasList).each(function () {
                                        tmp += ' <label class="radio-inline"><input type="radio" name="' + $(this)[0].PropId + '" value="'
                                            + $(this)[0].PropValueId + '" title="' + $(this)[0].CustomName + '">'
                                            + getimage($(this)[0]) + '</label>';
                                    });
                                }
                                tmp += '</div></div>';
                                moreinfo.append(tmp);
                            });

                        });
                        function getimage(item) {
                            if (item.IsImage) {
                                return '<img src="' + item.SmallImage + '">'
                            }
                            else return item.CustomName;
                        }
                    </script>

                </div>
            </div>
        </div>
    </div>
</section>

<%--footer--%>
<jsp:include page="../footer.jsp"/>

<!-- jQuery -->
<script src="${jquery}/jquery.js" charset="utf-8"></script>

<!-- JqueryUI -->
<script src="${jquery}/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${Bootstrap}/js/bootstrap.js"></script>
<!-- Owl-coursel -->
<script src="${Js}/front/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${Js}/front/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${Js}/front/script.js"></script>


</body>
</html>
